<template>
  <div class="showBox">
    <!-- fn-clear -->
    <div class="tab-bar-nav blankShow">
      <div class="tab-bar-item" v-for="item in tabBarNavContent">
        <div class="item-content">
          <div class="desc">{{ item.text }}</div>
          <van-icon :name="item.icon" badge="99+" size="25" />
        </div>
      </div>
      <!-- <h6 v-if="inputTitle == ''" :style="{textAlign:style}" :class="{'active':titleStyle == 'style2'}">
                <span class="line" v-if="titleStyle == 'style2'"></span>
                <span class="txt">点击编辑『标题』</span>
                <span class="line" v-if="titleStyle == 'style2'"></span>                
            </h6>
            <h6 v-else :style="{textAlign:style}" :class="{'active':titleStyle == 'style2'}">
                <span class="line" v-if="titleStyle == 'style2'"></span>
                <span class="txt">{{inputTitle}}</span>
                <span class="line" v-if="titleStyle == 'style2'"></span> 
            </h6>
            <span class="more" v-if="more == 'isHave'">更多></span> -->
    </div>
    <!-- 设置标题 -->
    <div class="modify_box head_modify">
      <head-modify :keyText="keyText"></head-modify>
      <set-tab-bar-nav
        @event="getData"
        :pageParam="pageParam"
      ></set-tab-bar-nav>
    </div>
  </div>
</template>

<script>
import { Tabbar, TabbarItem, Button, Icon } from "vant";
// 设置标题
import setTabBarNav from "@/components/set/setTabBarNav";
// 设置头部
import headModify from "@/components/common/headModify";
import List from "../../../static/js/List";
import { mapActions } from "vuex";
export default {
  name: "TabBarNav",
  props: {
    keyText: String,
    tempId: Number,
    keyWords: String,
    pageParam: {
      type: Object,
      default: () => {
        return {
          // title:'自定义标题',
          // titleLeftText:'返回',
          // titleLeftIsShowArrow:true,
          // titleRightTextOrIcon:'',
          // titleRightText:'',
          // titleRightIcon:'',
          // titleRightClickEventContent:'',
          tabBarNavContent: [
            {
              text: "首页",
              icon: "home-o",
              color: "",
              logoStyle: "",
              logoRequest: "",
              editorClickEvent: "",
            },
            {
              text: "首页",
              icon: "search",
              color: "",
              logoStyle: "",
              logoRequest: "",
              editorClickEvent: "",
            },
            {
              text: "首页",
              icon: "friends-o",
              color: "",
              logoStyle: "",
              logoRequest: "",
              editorClickEvent: "",
            },
            {
              text: "我的",
              icon: "setting-o",
              color: "",
              logoStyle: "",
              logoRequest: "",
              editorClickEvent: "",
            },
          ],
        };
      },
    },
  },
  data() {
    return {
      // title:'自定义标题',
      // titleLeftText:'返回',
      // titleLeftIsShowArrow:true,
      // titleRightTextOrIcon:'',
      // titleRightText:'',
      // titleRightIcon:'',
      // titleRightClickEventContent:'',
      // active: 0,
      tabBarNavContent: [
        {
          text: "",
          icon: "",
          color: "",
          logoStyle: "",
          logoRequest: "",
          editorClickEvent: "",
        },
      ],
    };
  },
  computed: {
    // style(){
    //     switch(this.titleStyle){
    //         case 'style1':
    //             return 'left';
    //         case 'style2':
    //             return 'center';
    //     }
    // }
  },
  components: {
    setTabBarNav,
    headModify,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Icon.name]: Icon,
    Button,
  },
  methods: {
    ...mapActions(["addData", "changeData"]),
    // 样式参数
    getData(title) {
      // this.title = title.title;
      // this.titleLeftText = title.titleLeftText;
      // this.titleLeftIsShowArrow = title.titleLeftIsShowArrow;
      // this.titleRightTextOrIcon = title.titleRightTextOrIcon;
      // this.titleRightText = title.titleRightText;
      // this.titleRightIcon = title.titleRightIcon;
      // this.titleRightClickEventContent = title.titleRightClickEventContent;
      // this.changeData({id:this.tempId,op:title})
    },
    // 存储数据
    saveData() {
      // let list = new List();
      // list.pageParam.title = this.title ;
      // list.pageParam.titleLeftText = this.titleLeftText ;
      // list.pageParam.titleLeftIsShowArrow = this.titleLeftIsShowArrow ;
      // list.pageParam.titleRightTextOrIcon = this.titleRightTextOrIcon ;
      // list.pageParam.titleRightText = this.titleRightText ;
      // list.pageParam.titleRightIcon = this.titleRightIcon ;
      // list.pageParam.titleRightClickEventContent = this.titleRightClickEventContent ;
      // this.addData(list);

      let list = new List();

      list.pageParam.tabBarNavContent = this.$utils.deepCopy(
        this.tabBarNavContent
      );
      this.addData(list);
    },
    // 初始化数据
    initData() {
      // this.title = this.pageParam.title;
      // this.titleLeftText = this.pageParam.titleLeftText;
      // this.titleLeftIsShowArrow = this.pageParam.titleLeftIsShowArrow;
      // this.titleRightTextOrIcon = this.pageParam.titleRightTextOrIcon;
      // this.titleRightText = this.pageParam.titleRightText;
      // this.titleRightIcon = this.pageParam.titleRightIcon;
      // this.titleRightClickEventContent = this.pageParam.titleRightClickEventContent;

      this.tabBarNavContent = this.$utils.deepCopy(
        this.pageParam.tabBarNavContent
      );
    },
  },

  mounted() {
    this.saveData();
    this.initData();
  },
};
</script>

<style scoped lang="scss">
.title {
  position: relative;
  line-height: 44px;
  padding: 0 10px;
  background-color: #fff;
}
.title h6 {
  position: relative;
  color: #333;
  font-size: 17px;
}
.title .more {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 14px;
  color: #666;
  height: 100%;
  line-height: 44px;
}
/* 右侧设置 */
.modify_box {
  position: absolute;
  right: -450px;
  top: 0;
  padding: 12px 10px;
  min-height: 28px;
  background: #f8f8f8;
  border-radius: 5px;
  border: 1px solid #e5e5e5;
  width: 420px;
  margin-left: 20px;
  font-size: 12px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 5;
}
.modify_box:after,
.modify_box:before {
  right: 100%;
  top: 20px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.modify_box:before {
  border-color: transparent;
  border-right-color: #e5e5e5;
  border-width: 7px;
  margin-top: -7px;
}
.title h6.active {
  display: table;
  margin: 0 auto;
}
.title h6 span.txt {
  margin: 0 8px 0 10px;
}
.title h6 span.line {
  width: 18px;
  height: 2px;
  background-color: #000;
  margin-top: 21px;
}
.title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  height: 40px;
  .title-left {
    color: #3e82f4;

    display: flex;
    justify-content: space-between;
    align-items: center;
    .title-text {
      color: #3e82f4;
    }
  }
}
.tab-bar-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
</style>
